<template>
    <div class="box">
        <van-nav-bar title="搜索" />
        <van-search v-model="title" placeholder="请输入搜索关键词" />
        <template v-if="datalist.length > 0">
            <van-card v-for="(v, i) in datalist" :key="i" :price="v.goods_price" :title="v.goods_name" thumb="">
                <template #thumb>
                    <img style="width: 6rem;height: 6rem;"
                        :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                        alt="">
                </template>
                
            </van-card>
        </template>
        <template v-else>
            <van-empty description="暂无数据" />
        </template>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let title = ref(route.query.name)
import { ref, watch } from 'vue';
import { searchApis } from '@/api/api';
let pagenum = ref(0)
let datalist = ref([])
const getlist = () => {
    setTimeout(() => {
        searchApis(title.value, pagenum.value).then(res => {
            datalist.value = res.data.message.goods
        })
    }, 1000);

}
getlist()

watch(title, (newValue, oldValue) => {
    getlist()
})
</script>

<style lang="scss" scoped></style>